<template lang="pug">
  div
    .pane-header
      .option
        el-button(size="small" round type="success" @click="onAppend") 增加
      el-pagination(background @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-size="per_page" layout="total, prev, pager, next" :total="totalCount")
    el-table(:data='dataList')
      el-table-column(prop='id' label='编号' width='80')
      el-table-column(prop='name' label='名称' width='380')
      el-table-column(prop='guard_name' label='显示名称' width='280')
      el-table-column(label='操作')
        template(slot-scope="scope")
          el-button(size="small" @click="rowEditBtn(scope.row,'user')") 编辑
          el-button(size="small" type="danger" @click="rowDeleteBtn(scope.$index, scope.row)") 删除
    el-dialog(:visible.sync='dialogFormVisible' modal=true append-to-body=true close-on-click-moda=false)
      el-form(ref='editPermissionFrom' label-suffix='：' label-position='right' :model='editItem' :rules='rules' label-width='120px')
        el-form-item(prop='name' label='名称')
          el-col(:span='15')
            el-input(type='text' v-model='editItem.name')
        el-form-item(prop='guard_name' label='显示名称')
          el-col(:span='15')
            el-input(type='text' v-model='editItem.guard_name')
      .dialog-footer(slot='footer')
        el-button(@click='dialogFormVisible = false') 取 消
        el-button(type='primary' @click="saveBtn('editPermissionFrom')") 确定
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import _ from "lodash";
import RemoteValidatorMixin from "../../../../components/RemoteValidatorAndTableEditMixin";
import {
  permission_list,
  permission_save,
  permission_remove
} from "../../../../services";

@Component({
  mixins: [RemoteValidatorMixin],
  components: {}
})
export default class PermissionPane extends Vue {
  public dialogFormVisible: boolean = false;

  public editItem: any[string] = {
    name: "",
    id: 0,
    guard_name: "",
  };

  constructor() {
    super();
    this.dataItem = "editItem";
  }

  public mounted() {
    let self: any = this;
    this.$nextTick(function() {
      this.$on("update", async function() {
        let data: any = await permission_list(self.pageNum);
        if (data.success) {
          self.list = data.data;
        }
      });
    });
  }

  public onAppend() {
    this.editItem = {
      name: "",
      id: 0,
      guard_name: "",
    };
    this.dialogFormVisible = true;
  }

  public async rowEditBtn(data: any, target: string) {
    this.editItem = _.clone(data);
    this.dialogFormVisible = true;
  }

  public async saveBtn(formName: string) {
    let self: PermissionPane = this;
    self.remoteValidate(self, formName, permission_save).then(
      (data: any) => {
        if (data) {
          self.$message({
            showClose: true,
            message: "保存成功"
          });
          self.updateRowItem(self.list.data, data, "id");
          self.editItem = data;
          self.dialogFormVisible = false;
        }
      },
      function(data: any) {
        console.log("error");
      }
    );
  }
  public async rowDeleteBtn(idx: number, rowData: any) {
    this.rowRemove(permission_remove, rowData.id, this.dataList, idx, "权限");
  }
}
</script>

<style lang="scss" scoped>
.pane-header {
  display: flex;
  margin-top: 1rem;
  justify-content: space-between;
}
</style>

